<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 字符编码设置 -->
    <meta charset="UTF-8" />
    
    <!-- 视口配置 - 响应式设计支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- SEO元数据 -->
    <meta name="description" content="二手交易平台 - 安全可靠的二手商品交易平台" />
    <meta name="keywords" content="二手交易,二手商品,交易平台" />
    <meta name="author" content="Trading Team" />
    
    <!-- 网站图标 -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="alternate icon" href="/favicon.ico" />
    
    <!-- 字体预加载 - 优化字体加载性能 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 页面标题 -->
    <title>二手交易平台</title>
    
    <!-- 全局样式重置和基础样式 -->
    <style>
      /**
       * 全局CSS重置样式
       * 
       * 功能：
       * - 统一不同浏览器的默认样式
       * - 设置基础布局和字体
       * - 提供加载动画样式
       * - 支持暗色模式
       */
      
      /* 全局重置 - 清除浏览器默认样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      /* 根元素样式设置 */
      html, body {
        height: 100%;
        /* 系统字体栈 - 提供最佳的可读性和性能 */
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
          'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
          'Noto Color Emoji';
        /* 字体渲染优化 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: #f5f5f5;
      }
      
      /* React应用根容器 */
      #root {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      
      /**
       * 加载动画样式
       * 
       * 功能：
       * - 在React应用加载时显示
       * - 提供用户友好的加载体验
       * - 防止页面空白闪烁
       */
      .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      
      /* 旋转加载动画 */
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #1890ff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      /* 旋转动画关键帧 */
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /**
       * 暗色模式支持
       * 
       * 功能：
       * - 根据系统偏好自动切换
       * - 提供更好的夜间使用体验
       * - 减少眼睛疲劳
       */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #141414;
          color: #fff;
        }
      }
    </style>
  </head>
  
  <body>
    <!-- React应用挂载点 -->
    <div id="root">
      <!-- 初始加载动画 - 在React应用加载完成前显示 -->
      <div class="loading-container">
        <div class="loading-spinner"></div>
      </div>
    </div>
    
    <!-- React应用入口脚本 -->
    <script type="module" src="/src/main.jsx"></script>
    
    <!-- 全局错误处理脚本 -->
    <script>
      /**
       * 全局错误处理
       * 
       * 功能：
       * - 捕获JavaScript运行时错误
       * - 处理未捕获的Promise拒绝
       * - 提供错误日志记录
       * - 防止应用崩溃
       */
      
      // 全局JavaScript错误处理
      window.addEventListener('error', function(e) {
        console.error('Global error:', e.error);
      });
      
      // Promise未捕获错误处理
      window.addEventListener('unhandledrejection', function(e) {
        console.error('Unhandled promise rejection:', e.reason);
      });
    </script>
  </body>
</html> 